<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/hchart/highcharts.js"></script>
    <script src="/static/hchart/highcharts-3d.js"></script>
    <script src="/static/hchart/modules/exporting.js"></script>
    <script src="/static/echarts/echarts.min.js"></script>
</head>
<body><h3>查看 [{{ student }}] 成绩</h3>

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <form action="">
                <table class="table-bordered table table-striped">
                    <thead>
                    <tr>
                        <th>班级</th>
                        <th>班主任</th>
                        <th>任课老师</th>
                        <th>课程成绩</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for cls in class_list %}
                        <tr>
                            <td>{{ cls }}</td>
                            <td>{{ cls.tutor }}</td>
                            <td>
                                {% for teacher in cls.teachers.all %}
                                    <span>{{ teacher }}</span>,
                                {% endfor %}

                            </td>
                            <td>
                                <a class="check_chart" cid="{{ cls.pk }}" sid="{{ student.pk }}">查看成绩</a>
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </form>
        </div>
    </div>
</div>

<div class="col-md-offset-1" id="container" style="width: 500px; height: 400px;"></div>

<script type="text/javascript">
    $('.check_chart').click(function () {
        $.ajax({
            url: "",
            type: "get",
            data: {
                cid: $(this).attr('cid'),
                sid: $(this).attr('sid')
            },
            success: function (data) {
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'column',  //图表类型 line, spline, area, areaspline, column, bar, pie , scatter
                        options3d: {
                            enabled: true,
                            alpha: 10,
                            beta: 25,
                            depth: 70
                        }
                    },
                    title: {
                        text: '查看学生每天的成绩'
                    },
                    subtitle: {
                        text: "数据截止 2017-07"
                    },
                    xAxis: {

                        {#type: 'category',#}
                        {##}
                        {#labels: {#}
                        {##}
                        {#    rotation: -45  // 设置轴标签旋转角度#}
                        {##}
                        {#    categories: ['day60', 'day60']#}
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '分数'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            pointFormat: '分数:'
                        },
                        plotOptions: {
                            column: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                depth: 35,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            }
                        },
                        series: [{

                            {#type: 'pie',#}
                            name: '总人口',
                            data: data,
                            dataLabels: {
                                enabled: true,
                                rotation: 1,
                                color: '#FFFFFF',
                                align: 'right',
                                format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                                y: 10
                            }
                        }],
                        credits: {
                            enabled: false // 禁用版权信息
                        },
                    });

            }
        });
    });
    Highcharts.setOptions({
        lang: {
            contextButtonTitle: "图表导出菜单",
            decimalPoint: ".",
            downloadJPEG: "下载JPEG图片",
            downloadPDF: "下载PDF文件",
            downloadPNG: "下载PNG文件",
            downloadSVG: "下载SVG文件",
            drillUpText: "返回 {series.name}",
            loading: "加载中",
            printChart: "打印图表",
            resetZoom: "恢复缩放",
            resetZoomTitle: "恢复图表",
        }
    });

</script>

</body>
</html>
